<!-- 工作区的头 -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">问答题数据显示</h1>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!--主要内容-->
<section id="main-info" class="content">


    <div class="container-fluid">

        <div class="card-body">
            <div id="jsGrid1" class="jsgrid" style="position: relative; height: 100%; width: 100%;">
                <div class="jsgrid-grid-body" style="height: 1000px;">
                    <div class="card">
                        <div class="card-header">
                            <button id="btnQAAdd" type="button" class="btn btn-primary btn-lg">添加</button>
                        </div>
                        <!-- 表格内容区域 -->
                        <div class="card-body">
                            <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6"></div>
                                    <div class="col-sm-12 col-md-6"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="example2"
                                               class="table table-bordered table-hover dataTable dtr-inline"
                                               aria-describedby="example2_info">
                                            <thead>
                                            <tr>
                                                <th class="sorting sorting_asc text-center" tabindex="0"
                                                    aria-controls="example2" rowspan="1"
                                                    colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending"
                                                    style="width: 10%">ID
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Browser: activate to sort column ascending"
                                                    style="width: 50%">题目
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Browser: activate to sort column ascending"
                                                    style="width: 10%">分值
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Platform(s): activate to sort column ascending"
                                                    style="width: 15%">科目
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Platform(s): activate to sort column ascending"
                                                    style="width: 15%">操作
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody id="qaTbody">
                                            <tr class="odd">
                                                <td class="dtr-control sorting_1 text-center" tabindex="0">Gecko</td>
                                                <td>Firefox 1.0</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">
                                                    <button type="button" class="btn btn-primary">答案</button>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button type="button" class="btn btn-primary">修改</button>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button type="button" class="btn btn-danger">删除</button>
                                                </td>
                                            </tr>
                                            <tr class="even">
                                                <td class="dtr-control sorting_1 text-center" tabindex="0">Gecko</td>
                                                <td>Firefox 1.5</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">
                                                    <button type="button" class="btn btn-primary">答案</button>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button type="button" class="btn btn-primary">修改</button>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button type="button" class="btn btn-danger">删除</button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<!--添加模态框-->
<div class="modal fade" id="dialogQAAdd" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content bg-secondary">
            <div class="modal-header">
                <h4 class="modal-title">问答题信息添加</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="card-body">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">ID</label>
                            <div class="col-sm-10">
                                <input id="qaIdAdd" type="text" readonly class="form-control"
                                       placeholder="id会系统填写">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">题目</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="qaTitleAdd"
                                          style="width: 100%; height: 150px;"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">答案</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="qaInfoAdd"
                                          style="width: 100%; height: 100px;"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">分值</label>
                            <div class="col-sm-10">
                                <input id="qaScoreAdd" type="text" class="form-control" placeholder="请输入分值">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">科目</label>
                            <div class="col-sm-10">
                                <select class="custom-select rounded-0" id="qaSubjectAdd">
                                    <option value="1">Value 1</option>
                                    <option value="2">Value 2</option>
                                    <option value="3">Value 3</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="btnQAAddAction" type="button" class="btn btn-primary">添加</button>
            </div>
        </div>
    </div>
</div>


<!--修改模态框-->
<div class="modal fade" id="dialogQAEdit" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content bg-secondary">
            <div class="modal-header">
                <h4 class="modal-title">问答题信息修改</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="card-body">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">ID</label>
                            <div class="col-sm-10">
                                <input id="qaIdEdit" type="text" readonly class="form-control"
                                       placeholder="id会系统填写">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">题目</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="qaTitleEdit"
                                          style="width: 100%; height: 150px;"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">答案</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="qaInfoEdit"
                                          style="width: 100%; height: 100px;"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">分值</label>
                            <div class="col-sm-10">
                                <input id="qaScoreEdit" type="text" class="form-control" placeholder="请输入分值">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">科目</label>
                            <div class="col-sm-10">
                                <select class="custom-select rounded-0" id="qaSubjectEdit">
                                    <option value="1">Value 1</option>
                                    <option value="2">Value 2</option>
                                    <option value="3">Value 3</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="btnQAEditAction" type="button" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>


<!-- 问答题详情模态框 -->
<div class="modal fade " id="dialogQAInfo" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content bg-info">
            <div class="modal-header">
                <h4 class="modal-title">问答题详细信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="card-body">
                        <dl id="qaInfoMessage" class="row">
                            <dt class="col-sm-4">科目：</dt>
                            <dd class="col-sm-8">A description list is perfect for defining terms.</dd>
                            <dt class="col-sm-4">分值：</dt>
                            <dd class="col-sm-8">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem
                                nec elit.
                            </dd>
                            <dt class="col-sm-4">题目：</dt>
                            <dd class="col-sm-8">Etiam porta sem malesuada magna mollis euismod.</dd>
                            <dt class="col-sm-4">答案：</dt>
                            <dd class="col-sm-8">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
                                nibh, ut fermentum massa justo
                                sit amet risus.
                            </dd>
                        </dl>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
            </div>
        </div>
    </div>
</div>


<script>
    function qaGetAll() {
        $.ajax({
            // 异步请求的地址
            url: "/qa/getAll.action",
            // 默认是get请求
            type: "get",
            // 后端返回数据的格式JSON
            dataType: "json",

            // 请求之前做的事情
            beforeSend: function (XMLHttpRequest) {
                console.log("请求之前做的事情.......");
            },

            // 请求成功做的事情
            success: function (data, textStatus) {
                console.log("请求成功做的事情........");

                // 删除标签中已有的数据
                $("#qaTbody").empty();

                $.each(data.data, function (i, n) {
                    $("#qaTbody").append('<tr class="odd">\n' +
                        '                                                <td class="dtr-control sorting_1 text-center" tabindex="0">' + n.question_id + '</td>\n' +
                        '                                                <td>' + n.question.title + '</td>\n' +
                        '                                                <td class="text-center">' + n.question.score + '</td>\n' +
                        '                                                <td class="text-center">' + n.question.subject.name + '</td>\n' +
                        '                                                <td class="text-center">\n' +
                        '                                                    <button onclick="qaInfo('+ n.question_id +')" type="button" class="btn btn-primary">答案</button>\n' +
                        '                                                    &nbsp;&nbsp;&nbsp;&nbsp;\n' +
                        '                                                    <button onclick="editBefore('+ n.question_id +')" type="button" class="btn btn-primary">修改</button>\n' +
                        '                                                    &nbsp;&nbsp;&nbsp;&nbsp;\n' +
                        '                                                    <button onclick="del('+ n.question_id +')" type="button" class="btn btn-danger">删除</button>\n' +
                        '                                                </td>\n' +
                        '                                            </tr>');
                });

            },

            // 请求失败做的事情
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败做的事情.......");
            },

            // 请求完毕做的事情
            complete: function (XMLHttpRequest, textStatus) {
                console.log("请求完毕做的事情.......");
            }
        });
    }

    qaGetAll();

    // 添加按钮事件
    $("#btnQAAdd").click(function () {
        $("#dialogQAAdd").modal("show");
    })

    // 添加模态框加载完毕后事件
    $("#dialogQAAdd").on("show.bs.modal", function (event) {
        $("#qaTitleAdd").val("");
        $("#qaInfoAdd").val("");
        $("#qaScoreAdd").val("");

        $.ajax({
            // 异步请求的地址
            url: "/subject/getAll.action",
            // 默认是get请求
            type: "get",
            // 后端返回数据的格式JSON
            dataType: "json",

            // 请求之前做的事情
            beforeSend: function (XMLHttpRequest) {
                console.log("请求之前做的事情.......");
            },

            // 请求成功做的事情
            success: function (data, textStatus) {
                console.log("请求成功做的事情........");

                // 删除标签中已有的数据
                $("#qaSubjectAdd").empty();

                $.each(data.data, function (i, n) {
                    $("#qaSubjectAdd").append('<option value="' + n.id + '">' + n.name + '</option>');
                });

            },

            // 请求失败做的事情
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败做的事情.......");
            },

            // 请求完毕做的事情
            complete: function (XMLHttpRequest, textStatus) {
                console.log("请求完毕做的事情.......");
            }
        });
    });


    // 添加模态框的添加按钮事件
    $("#btnQAAddAction").click(function () {

        // 接口添加模态框里面的数据
        var myData = {
            info: $("#qaInfoAdd").val(),
            question: {
                title: $("#qaTitleAdd").val(),
                score: $("#qaScoreAdd").val(),
                type_id: "4",
                subject_id: $("#qaSubjectAdd").val()
            }
        };

        // 使用JSON.stringify()方法将数据转换为纯粹的JSON文本
        myData = JSON.stringify(myData);

        $.ajax({
            // 异步请求的地址
            url: "/qa/add.action",
            // 默认是get请求
            type: "post",
            // 后端返回数据的格式JSON
            dataType: "json",
            // 前端上传到后端的参数是JSON格式
            contentType:"application/json",
            // 前端组织参数，准备提交给后端
            data: myData,


            // 请求之前做的事情
            beforeSend: function (XMLHttpRequest) {
                console.log("请求之前做的事情.......");
            },

            // 请求成功做的事情
            success: function (data, textStatus) {
                console.log("请求成功做的事情........");

                if (data.result === "success"){
                    // 关闭模态框
                    $("#dialogQAAdd").modal("hide");

                    // 刷新数据
                    qaGetAll();
                }else {
                    alert(data.error);
                }

            },

            // 请求失败做的事情
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败做的事情.......");
            },

            // 请求完毕做的事情
            complete: function (XMLHttpRequest, textStatus) {
                console.log("请求完毕做的事情.......");
            }
        });
    });

    // 修改按钮事件
    function editBefore(id) {
        $("#dialogQAEdit").data("id", id);
        $("#dialogQAEdit").modal("show");
    }

    // 修改模态框加载完毕后事件
    $("#dialogQAEdit").on("show.bs.modal", function (event) {
        $.ajax({
            // 异步请求的地址
            url: "/subject/getAll.action",
            // 默认是get请求
            type: "get",
            // 后端返回数据的格式JSON
            dataType: "json",

            // 请求之前做的事情
            beforeSend: function (XMLHttpRequest) {
                console.log("请求之前做的事情.......");
            },

            // 请求成功做的事情
            success: function (data, textStatus) {
                console.log("请求成功做的事情........");

                // 删除标签中已有的数据
                $("#qaSubjectEdit").empty();

                $.each(data.data, function (i, n) {
                    $("#qaSubjectEdit").append('<option value="' + n.id + '">' + n.name + '</option>');
                });

                $.ajax({
                    // 异步请求的地址
                    url: "/qa/editBefore.action",
                    // 默认是get请求
                    type: "get",
                    // 后端返回数据的格式JSON
                    dataType: "json",
                    // 前端组织参数，准备提交给后端
                    data:{
                        id: $("#dialogQAEdit").data("id")
                    },


                    // 请求之前做的事情
                    beforeSend: function (XMLHttpRequest) {
                        console.log("请求之前做的事情.......");
                    },

                    // 请求成功做的事情
                    success: function (data, textStatus) {
                        console.log("请求成功做的事情........");

                        $("#qaIdEdit").val(data.data.question_id);
                        $("#qaTitleEdit").val(data.data.question.title);
                        $("#qaInfoEdit").val(data.data.info);
                        $("#qaScoreEdit").val(data.data.question.score);
                        $("#qaSubjectEdit").val(data.data.question.subject.id)
                    },

                    // 请求失败做的事情
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log("请求失败做的事情.......");
                    },

                    // 请求完毕做的事情
                    complete: function (XMLHttpRequest, textStatus) {
                        console.log("请求完毕做的事情.......");
                    }
                });

            },

            // 请求失败做的事情
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败做的事情.......");
            },

            // 请求完毕做的事情
            complete: function (XMLHttpRequest, textStatus) {
                console.log("请求完毕做的事情.......");
            }
        });
    });

    // 修改模态框修改按钮点击事件
    $("#btnQAEditAction").click(function () {
        // 接收修改模态框修改的数据
        var myData = {
            info: $("#qaInfoEdit").val(),
            question_id: $("#qaIdEdit").val(),
            question: {
                id: $("#qaIdEdit").val(),
                title: $("#qaTitleEdit").val(),
                score: $("#qaScoreEdit").val(),
                type_id: "4",
                subject_id: $("#qaSubjectEdit").val()
            }
        };

        // 将接收到的数据转换为纯粹的JSON格式
        var data = JSON.stringify(myData);

        $.ajax({
            // 异步请求的地址
            url: "/qa/edit.action",
            // 默认是get请求
            type: "post",
            // 后端返回数据的格式JSON
            dataType: "json",
            // 前端上传到后端的参数是JSON格式
            contentType:"application/json",
            // 前端组织参数，准备提交给后端
            data:data,


            // 请求之前做的事情
            beforeSend: function (XMLHttpRequest) {
                console.log("请求之前做的事情.......");
            },

            // 请求成功做的事情
            success: function (data, textStatus) {
                console.log("请求成功做的事情........");

                if (data.result === "success"){
                    // 关闭模态框
                    $("#dialogQAEdit").modal("hide");

                    // 刷新数据
                    qaGetAll();
                }else {
                    alert(data.error);
                }

            },

            // 请求失败做的事情
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败做的事情.......");
            },

            // 请求完毕做的事情
            complete: function (XMLHttpRequest, textStatus) {
                console.log("请求完毕做的事情.......");
            }
        });
    });

    // 详情按钮点击事件
    function qaInfo(id) {
        $("#dialogQAInfo").data("id", id);
        $("#dialogQAInfo").modal("show");
    }

    // show方法调用事件
    $("#dialogQAInfo").on("show.bs.modal", function (event) {
        $.ajax({
            // 异步请求的地址
            url: "/qa/editBefore.action",
            // 默认是get请求
            type: "get",
            // 后端返回数据的格式JSON
            dataType: "json",
            // 前端组织参数，准备提交给后端
            data:{
                id:$("#dialogQAInfo").data("id")
            },


            // 请求之前做的事情
            beforeSend: function (XMLHttpRequest) {
                console.log("请求之前做的事情.......");
            },

            // 请求成功做的事情
            success: function (data, textStatus) {
                console.log("请求成功做的事情........");

                // 删除标签中已有的数据
                // $("#qaInfoMessage").empty();

                $("#qaInfoMessage").html('<dt class="col-sm-1">科目：</dt>\n' +
                    '                            <dd class="col-sm-11">'+ data.data.question.subject.name +'</dd>\n' +
                    '                            <dt class="col-sm-1">分值：</dt>\n' +
                    '                            <dd class="col-sm-11">'+ data.data.question.score +'</dd>\n' +
                    '                            <dt class="col-sm-1">题目：</dt>\n' +
                    '                            <dd class="col-sm-11">'+ data.data.question.title +'</dd>\n' +
                    '                            <dt class="col-sm-1">答案：</dt>\n' +
                    '                            <dd class="col-sm-11">'+ data.data.info +'</dd>');

            },

            // 请求失败做的事情
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败做的事情.......");
            },

            // 请求完毕做的事情
            complete: function (XMLHttpRequest, textStatus) {
                console.log("请求完毕做的事情.......");
            }
        });
    });

    // 删除按钮点击事件
    function del(id) {
        var result = confirm("是否确实要删除该数据？");

        if (result){
            $.ajax({
                // 异步请求的地址
                url: "/qa/del.action",
                // 默认是get请求
                type: "get",
                // 后端返回数据的格式JSON
                dataType: "json",
                // 前端组织参数，准备提交给后端
                data:{
                    id:id
                },


                // 请求之前做的事情
                beforeSend: function (XMLHttpRequest) {
                    console.log("请求之前做的事情.......");
                },

                // 请求成功做的事情
                success: function (data, textStatus) {
                    console.log("请求成功做的事情........");

                    if (data.result === "success"){
                        // 关闭模态框
                        $("#dialogQAInfo").modal("hide");

                        // 刷新数据
                        qaGetAll();
                    }else {
                        alert(data.error);
                    }

                },

                // 请求失败做的事情
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("请求失败做的事情.......");
                },

                // 请求完毕做的事情
                complete: function (XMLHttpRequest, textStatus) {
                    console.log("请求完毕做的事情.......");
                }
            });
        }

    }



</script>

